<!--
 * @Description: 接口编辑器
 * @Author: xuechengwu
 * @Email: 516385822@qq.com
 * @Date: 2022-02-07 14:17:24
 * @LastEditTime: 2022-02-09 09:55:40
 * @LastEditors: xuechengwu
-->
<template>
  <div class="interface-editor-box">
        <div class="interface-editor-title">
            <h5>接口数据</h5>
            <div class="interface-editor-btn">
                <el-button type="primary" size="mini" @click="showDialog">新增</el-button>
            </div>
        </div>
        <div class="interface-list">
            <div class="interface-list-item">
                <div class="interface-list-item-name bold">
                    接口名称
                </div>
                <div class="interface-list-item-tool">
                </div>
            </div>
            <div
                v-for="(item) in interfaces"
                :key="item.key"
                class="interface-list-item"
            >
                <div class="interface-list-item-name">
                    {{ item.name }}
                </div>
                <div class="interface-list-item-tool">
                    <i class="el-icon-edit-outline" @click="editInterface(item)"></i>
                    <i class="el-icon-close" @click="removeInterface(item)"></i>
                </div>
            </div>
            <el-empty description="还没有关联任何接口" :image-size="60" v-if="interfaces.length === 0">
                <div class="empty-link" @click="showDialog">立即关联</div>
            </el-empty>
        </div>
        <el-dialog
            title="新增"
            :visible.sync="show"
            lock-scroll
            modal
            show-close
            >
            <div class="body-content">
                <div class="source-search-box">
                    <label>接口名称</label>
                    <div class="search-name input-box">
                        <el-input size="mini" v-model="name"/>
                    </div>
                </div>
                <div class="source-search-box">
                    <div class="source-search-method">
                        <el-select v-model="apiMethod" size="mini">
                          <el-option label="GET" value="GET"></el-option>
                          <el-option label="POST" value="POST"></el-option>
                        </el-select>
                    </div>
                    <div class="input-box">
                        <el-input size="mini" v-model="api"/>
                    </div>
                    <el-button @click="searchData" size="mini">查询</el-button>
                </div>
                <div class="request-content">
                    <div class="request-content-title">
                        <h5>参数设置</h5>
                        <i class="el-icon-plus" @click="addParam"></i>
                    </div>
                    <div class="request-content-box">
                        <table class="request-param-table">
                            <thead>
                                <tr>
                                    <th>键值</th>
                                    <th>值</th>
                                    <th>备注</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr
                                    v-for="(item, index) in params"
                                    :key="item.key"
                                    >
                                    <td>
                                        <el-input size="mini" v-model="params[index].key" placeholder="请输入请求键值"></el-input>
                                    </td>
                                    <td>
                                        <el-select v-model="params[index].value" size="mini">
                                            <el-option-group
                                                label="页面数据"
                                                key="datas"
                                            >
                                                <el-option
                                                    v-for="option in dataOptions"
                                                    :key="option.path"
                                                    :label="option.name"
                                                    :value="option.path"
                                                ></el-option>
                                            </el-option-group>
                                            <el-option-group
                                                label="远程数据"
                                                key="values"
                                            >
                                            </el-option-group>
                                            <el-option label="自定义" :value="-1"></el-option>
                                        </el-select>
                                    </td>
                                    <td>
                                        <el-input placeholder="请输入备注" size="mini" v-model="params[index].description"></el-input>
                                    </td>
                                </tr>
                                
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="response-content">
                    <h5>返回结果</h5>
                    <div class="response-content-tree">
                        <el-tree :data="treeData" :props="defaultProps" ></el-tree>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button type="primary" @click="show = false">取消</el-button>
                <el-button type="success" @click="onOk">确认</el-button>
            </div>
        </el-dialog>
  </div>
</template>

<script>
function getTree(data) {
    if (typeof data !== 'object' || data === null) {
        return [{
            label: data,
        }];
    }
    const keys = Object.keys(data);
    return keys.map(vo => ({
        label: vo,
        children: getTree(data[vo]),
    }));
}
import axios from 'axios';
import { obtain } from '../../../utils/common';
export default {
    props: {
        page: {
            type: Object,
            default: () => ({}),
        }
    },
    data() {
        return {
            show: false,
            apiMethod: 'GET',
            params: [],
            api: '',
            name: '',
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            treeData: [],
            queryData: '',
        };
    },
    computed: {
        dataOptions() {
            const { page = {} } = this;
            const { datas = {} } = page;
            return Object.keys(datas).map(vo => ({
                name: datas[vo].name,
                path: `datas.${vo}.value`,
            }));
        },
        interfaces() {
            return this.page.interfaces || [];
        },
    },
    methods: {
        showDialog() {
            this.show = true;
        },
        addParam() {
            this.params.push({
                key: '',
                value: '',
                customValue: '',
                description: '',
            })
        },
        searchData() {
            const { api, params = [], page } = this;
            let data = {};
            params.forEach(vo => {
                if (Number(vo.value) === -1) {
                    data[vo.key] = vo.customValue;
                } else {
                    data[vo.key] = obtain(vo.value, page, '');
                }
            });
            console.log('data===>', data, params);
            axios({
                method: 'get',
                params: {
                    api,
                    method: this.apiMethod,
                    data,
                },
                url: '/api/pageDesign/getData',
            }).then((res) => {
                const { data } = res;
                const { key, data: value } = data;
                console.log('res====>', res, data, value);
                this.dataKey = key,
                this.treeData = getTree(value);
                this.queryData = value;
            });
        },
        onOk() {
            if (this.api !== '') {
                this.$store.commit('ADD_INTERFACE', {
                    key: this.dataKey,
                    api: this.api,
                    data: this.queryData,
                    name: this.name,
                    params: this.params,
                });
            }
            this.show = false;
            this.treeData = [];
            this.queryData = '';
            this.api = '';
            this.name = '';
            this.params = [];
        },
        editInterface(vo) {
            const { key, api, name, params } = vo;
            const { values } = this.page;
            this.dataKey = key;
            this.api = api;
            this.name = name;
            this.params = params;
            this.queryData = values[key];
            this.show = true;
        },
        removeInterface(vo) {
            const { mark } = this.page;
            const { key } = vo;
            // TODO: 校验是否有数据绑定接口数据
            this.$store.commit('REMOVE_INTERFACE', { mark, key });
        }
    }
}
</script>

<style lang="less" scoped>
.interface-editor-box {
    .interface-editor-title {
        display: flex;
        align-items: center;
        padding: 12px 0;
        .interface-editor-btn {
            margin-left: auto;
        }
    }
    .interface-list {
        height: 264px;
        overflow-y: auto;
        .interface-list-item {
            display: flex;
            align-items: center;
            font-size: 12px;
            padding: 8px 0;
            position: relative;
            &::after {
                position: absolute;
                width: 100%;
                display: inline-block;
                content: ' ';
                left: 0;
                bottom: 0;
                background: #DFDFDF;
                height: 1px;
                transform: scaleY(0.6);
            }
            .interface-list-item-name {
                flex: 1;
                &.bold {
                    font-weight: 800;
                }
            }
            .interface-list-item-tool {
                flex: 0 0 36px;
            }
        }
    }
    .empty-link {
        color: rgba(0,146,255,1);
        cursor: pointer;
    }
}
.body-content {
    .request-content-title{
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }
    .response-content-tree {
        max-height: 120px;
        overflow-y: auto;
        padding: 8px 0;
        border: solid 1px #DFDFDF;
        margin-top: 8px;
    }
    .source-search-box {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        
        .source-search-method {
            width: 80px;
        }
        .input-box {
            padding: 0 12px;
            flex: 1;
        }
        .search-name {
            flex: 0 0 320px;
        }
    }
    .request-content-box {
        height: 120px;
        overflow-y: auto;
        margin-bottom: 12px;
        border: solid 1px #DFDFDF;
        padding: 8px 4px;
        .request-param-table {
            width: 100%;
            text-align: left;
        }
    }
}
</style>